<template>
  <div>
    <h2>BFC测试</h2>
    <div class="block-20"></div>
    <h3>两栏布局</h3>
    <div class="tow-column">
      <div class="column-1">column-1</div>
      <div class="column-2">column-2</div>
    </div>
    <h3>三栏布局</h3>
    <div class="three-column">
      <div class="column-1">column-1</div>
      <div class="column-3">column-3</div>
      <!-- 注意中间的布局放到最后 -->
      <div class="column-2">column-2</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'BFC',
})
export default class extends Vue {

}
</script>

<style lang="scss">
  .tow-column {
    .column-1 {
      background-color: red;
      height: 200px;
      width: 200px;
      float: left;
    }

    .column-2 {
      background-color: blue;
      height: 300px;
      overflow: auto;
    }
  }

  .three-column {
    height: 200px;
    & > * {
      height: 100%;
    }

    .column-1 {
      background-color: red;
      float: left;
      width: 200px;
    }

    .column-2 {
      background-color: green;
      overflow: auto;
    }

    .column-3 {
      background-color: blue;
      float: right;
      width: 200px;
    }
  }
</style>
